<template>
  <div class="distribution-channel-list">
    <el-card class="box-card header-box">
      <div class="box-title">
        <span>品牌列表</span>
      </div>
      <div class="box-detail">
        <span> 品牌列表，可以对现有品牌进行管理、编辑 </span>
      </div>
      <!-- 查询表单 -->
      <el-row :gutter="10">
        <el-form :model="searchForm" class="search_form">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="品牌名称">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="描述">
                <el-input v-model="searchForm.description" placeholder="描述">
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="searchForm.createTime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <!-- 添加品牌弹窗 -->
    <el-dialog
      title="添加品牌"
      :visible.sync="dialogCreateBrandVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="createBrand"
        :rules="rules"
        :label-position="labelPosition"
      >
        <el-form-item label="品牌名称" prop="name" label-width="80px">
          <el-input v-model.trim="createBrand.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌描述" label-width="80px">
          <el-input v-model="createBrand.description"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateBrandVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateBrand">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改品牌弹窗 -->
    <el-dialog
      title="修改品牌"
      :visible.sync="dialogBrandDetailVisible"
      width="30%"
    >
      <el-form :model="brandDetail" v-loading="loading" :rules="rules">
        <el-form-item label="品牌名称" prop="name" label-width="80px">
          <el-input v-model.trim="brandDetail.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌描述" label-width="80px">
          <el-input v-model="brandDetail.description"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBrandDetailVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBrandSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 品牌列表 -->
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      class="listTable"
      stripe
      height="600px"
    >
      <el-table-column prop="id" width="80" label="id"></el-table-column>
      <el-table-column prop="name" label="品牌名称"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column prop="create_time" label="创建日期">
        <template slot-scope="scope">
          <span>
            {{ operatingTime(scope.row.create_time) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header"> 操作 </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEditBrand(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      small
      layout=" total, prev, pager, next"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      v-show="this.tableData.length > 0"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getRequest } from "@/api/api";
import { postRequest } from "@/api/api";
import { SelectData } from "@/mixins/select-data.js";
export default {
  mixins: [SelectData],
  data() {
    return {
      labelPosition: "right",
      rules: {
        name: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在2到20个字符", trigger: "blur" },
        ],
      },
      dialogCreateBrandVisible: false,
      dialogBrandDetailVisible: false,
      loading: false,
      currentUser: {},
      tableLoading: false,
      createId: "1",
      createBrand: {
        name: "",
        description: "",
      },
      searchForm: {
        name: "",
        description: "",
        createTime: "",
        currentPage: 1,
        pageSize: 8,
      },
      brandDetail: {
        id: -1,
        name: "",
        description: "",
      },
      tableData: [],
      totalCount: -1,
      originParams: {
        pageSize: 8,
        currentPage: 1,
      },
      pageSize: 8,
      currentPage: 1,
    };
  },
  mounted() {
    this.loadBrandList(this.originParams);
    this.createId = this.global.createUserId;
  },
  methods: {
    loadBrandList(pageParams) {
      this.tableLoading = true;
      getRequest("/brand/list", pageParams)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.totalCount = res.data.data.totalCount;
          this.tableLoading = false;
        })
        .catch((err) => {
          this.tableLoading = false;
          this.$message.error("加载失败");
        });
    },
    handleCurrentChange: function (currentPage) {
      this.tableLoading = true;
      this.searchForm.currentPage = currentPage;
      this.loadBrandList(this.searchForm);
    },
    handleCreateBrand() {
      // this.tableLoading = true;
      let nowDate = this.$moment().format("YYYY-MM-DD");
      let params = {
        name: this.createBrand.name,
        description: this.createBrand.description,
        create_time: nowDate,
        createId: this.createId,
      };
      postRequest("/brand/insert", params).then((res) => {
        if (res.data.code == 1000) {
          console.log("success");
          this.dialogCreateBrandVisible = false;
          this.tableLoading = true;
          this.createBrand = {
            name: "",
            description: "",
            create_time: "",
          };
          this.$message.success(res.data.msg);
          this.loadBrandList(this.originParams);
        } else {
          console.log("error");
          this.$message.error(res.data.msg);
        }
      });

      // this.loadBrandList(this.originParams);
    },
    handleEditBrand(id) {
      this.dialogBrandDetailVisible = true;
      this.loading = true;
      getRequest("/brand/brand_detail", { id: id }).then((res) => {
        this.brandDetail.name = res.data.data.name;
        this.brandDetail.description = res.data.data.description;
        this.brandDetail.id = res.data.data.id;
        this.loading = false;
      });

      console.log(id);
    },
    editBrandSubmit() {
      console.log(this.brandDetail);
      let params = this.brandDetail;
      this.dialogBrandDetailVisible = false;
      postRequest("/brand/update", params)
        .then((res) => {
          if (res.data.code == 1000) {
            console.log("success");
            this.tableLoading = true;
            this.$message.success("更新成功");
            this.loadBrandList(this.searchForm);
          } else {
            console.log("error");
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("服务器错误");
        });
    },
    handleDelete(id) {
      this.$confirm(
        "此操作将会删除该品牌，可能会影响到策划文档，是否继续？",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          postRequest("/brand/delete", { id: id })
            .then((res) => {
              if (res.data.code == 1000) {
                this.$message.success(res.data.msg);
                this.loadBrandList(this.searchForm);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
              console.log(err);
            });
        })
        .catch((err) => {
          this.$message.error("已取消");
        });
    },
    handleSearch() {
      console.log(this.searchForm);
      this.tableLoading = true;
      this.searchForm.currentPage = 1;
      getRequest("brand/list", this.searchForm)
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data.records;
          this.currentPage = 1;
          this.totalCount = res.data.data.totalCount;
          this.tableLoading = false;
        })
        .catch((err) => {
          this.$message.error(err);
          this.tableLoading = false;
        });
    },
    operatingTime(timeDate) {
      return this.$moment(timeDate).format("YYYY-MM-DD");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.createBrand = {
            name: "",
            description: "",
            create_time: "",
          };
          done();
        })
        .catch((_) => {});
    },
    handleCreate() {
      this.dialogCreateBrandVisible = true;
    },
  },
};
</script>
<style scoped>
.distribution-channel-list {
  /* width: 80%; */
  /* padding: 24px; */
  margin: 0 auto;
}
.search_form {
  margin: 20px 0;
}
.el-input {
  width: 75%;
}
.listTable {
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.header-box {
  margin-bottom: 16px;
  padding: 24px;
}
.channel-box {
  height: 300px;
  padding: 24px;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.box-title {
  text-align: left;
  font-size: 20px;
}
.box-detail {
  text-align: left;
  color: gray;
  font-size: 14px;
}
</style>